<template>

  <data-table
    ref="pagingTable"
    :options="options"
    :list-query="listQuery"
  >
    <template #filter-content>
      <el-input v-model="listQuery.params.title" size="small" placeholder="搜索题库名称" style="width: 200px;" class="filter-item" />

      <el-date-picker
        v-model="listQuery.params.dateRange"
        size="small"
        class="filter-item"
        type="datetimerange"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="训练开始时间"
        end-placeholder="训练结束时间"
        style="width: 400px"
      />

      <el-button type="primary" icon="el-icon-download" class="filter-item" size="small" @click="handleExport">导出</el-button>
    </template>

    <template #data-columns>

      <el-table-column
        label="题库名称"
        prop="title"
        show-overflow-tooltip
      />

      <el-table-column
        label="训练人数"
        prop="userCount"
        align="center"
      />

      <el-table-column
        label="答题总数"
        prop="answerCount"
        align="center"
      />

      <el-table-column
        label="答对题数"
        prop="rightCount"
        align="center"
      />

      <el-table-column
        label="整体正确率%"
        prop="rightRate"
        align="center"
      />

    </template>

  </data-table>

</template>

<script>
import DataTable from '@/components/DataTable'
import { apiExportRepoStat } from '@/api/stat/repo'

export default {
  components: { DataTable },
  data() {
    return {

      listQuery: {
        current: 1,
        size: 10,
        params: {
          courseId: this.courseId,
          catId: null
        }
      },

      options: {

        // 可批量操作
        multi: false,

        // 列表请求URL
        listUrl: '/api/stat/repo/repo-overview-paging'
      }
    }
  },

  created() {

  },

  methods: {

    // 导出数据
    handleExport() {
      apiExportRepoStat(this.listQuery.params)
    }
  }
}
</script>

